<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <div><img id="container" width="500" height="300" /></div>
        <div><input type="file" id="trigger" /></div>
        <script type="text/javascript" src="http://assets.taobaocdn.com/js/tbra/tbra-widgets.js"></script>
        <script type="text/javascript">
            $E.on('trigger', 'change', function(e) {
               if (!/(.jpg|.jpeg|.gif|.png)$/i.test(this.value)) {
                    alert('请您选择图片文件');
                    return;
               };

               var img = $D.get('container');

               var imgSrc = this.value;
               if (!!window.XDomainRequest) {
                    this.select();
                    imgSrc = document.selection.createRange().text;
               };

               if (this.files && this.files[0].getAsDataURL)
               {
                   img.src = this.files[0].getAsDataURL();
               }
               else if (img.filters)
               {
                   var fliter = 'DXImageTransform.Microsoft.AlphaImageLoader';
                   if (img.style.cssText.indexOf(fliter) == -1) {
                       img.style.cssText += 'filter:progid:' + fliter + '(sizingMethod=scale);';
                   };
                   img.src = 'http://assets.taobaocdn.com/img/app/album/mask.png';
                   img.filters.item(fliter).src = imgSrc;
               }
               else
               {
                   img.src = imgSrc;
               }
            }, $D.get('trigger'), true);
        </script>
    </body>
</html>
